﻿<template>
    <el-dialog :title="no" :close-on-click-modal="false" :visible.sync="visible" :append-to-body="true"
        class="SHZY-dialog SHZY-dialog_center" lock-scroll width="20%">

        <div :style="{   }" class="body-class">

            <canvas ref="qrcodeCanvas" class="qrcode-class"></canvas>
        </div>


    </el-dialog>

</template>

<script>

import QRCode from 'qrcode'

export default {
    data() {
        return {

            visible: false,
            no: undefined,



        }
    },
    name: 'QrCodeComponent',

    methods: {

        init(id) {

            this.no = id
            this.visible = true
            this.$nextTick(() => {
                const canvas = this.$refs.qrcodeCanvas
                QRCode.toCanvas(canvas, id, error => {
                    if (error) console.error(error)
                }, { margin: 0.5 })


            })
        },




    }
}
</script>
<style scoped>
::v-deep .el-dialog .el-dialog__body {
    padding: 10px !important;
}


.body-class{
    margin: 0 auto;
     width: 100%;
    text-align: center;
}
.qrcode-class {


    margin: 0 auto;
    width: 180px !important;
    height: 180px !important;
}
</style>